import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Heand from '../../component/heand';
import { useNavigate } from "react-router-dom";
import { Input, Button } from 'antd';

function Add_newdoor_home() {
  const [name, setName] = useState('');
  const [jianjie,setJianjie]=useState('')
  
  const [jianjie1,setJianjie1]=useState('')
  const [jianjie2,setJianjie2]=useState('')
  const [jianjie3,setJianjie3]=useState('')
  const [jianjie4,setJianjie4]=useState('')
  const [jianjie5,setJianjie5]=useState('')
  const [jianjie6,setJianjie6]=useState('')
  const [image, setImage] = useState(null);
  const [imageUrl, setImageUrl] = useState('');
  const [bcid, setBcid] = useState('')

  
  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handleJianjieChange = (event) => {
    setJianjie(event.target.value);
  };

  const handleJianjieChange1 = (event) => {
    setJianjie1(event.target.value);
  };
   const handleJianjieChange2 = (event) => {
    setJianjie2(event.target.value);
  };
   const handleJianjieChange3 = (event) => {
    setJianjie3(event.target.value);
  };
   const handleJianjieChange4 = (event) => {
    setJianjie4(event.target.value);
  };
   const handleJianjieChange5 = (event) => {
    setJianjie5(event.target.value);
  };
   const handleJianjieChange6 = (event) => {
    setJianjie6(event.target.value);
  };

const navigate = useNavigate()
  const handleImageChange = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onloadend = () => {
      setImage(file);
      setImageUrl(reader.result);
    };

    if(file instanceof Blob)
    {
       reader.readAsDataURL(file);
    }
   


  };

 

  const handleSubmit = (event) => {
    event.preventDefault();

    // 上传图片到LeanCloud
    const formData = new FormData();
    formData.append('file', image);
    formData.append('name', image.name);
    axios.post('https://api.leancloud.cn/1.1/files/file', formData, {
      headers: {
        " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
        "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
        'Content-Type': 'image/jpeg'
      }
    })
      .then(response => {
        const imageUrl = response.data.url;

        // 将商品信息添加到LeanCloud
        axios.post('https://api.leancloud.cn/1.1/classes/pccpimage', {
          name: name,
          title:jianjie,
          imageurl: imageUrl,
          bcid:'3',
          ne:jianjie1,
          class:jianjie2,
          cail:jianjie3,
          clhd:jianjie4,
          ys:jianjie5,
          qita:jianjie6
        }, {
          headers: {

            " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
            "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
            'Content-Type': 'application/json',
          }
        })
          .then(() => {
            // 添加成功后的处理逻辑
            console.log('商品添加成功');


            axios.get(`https://api.leancloud.cn/1.1/classes/pccpimage?where={"imageurl":"${imageUrl}"}`,{
              headers: {

                " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
                "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
                'Content-Type': 'application/json',
              }
            }).then((res)=>{
              // console.log("添加成功")
                  console.log(res)
                 
            axios.post('https://api.leancloud.cn/1.1/classes/quan',{
              objectId:res.data.results[0].objectId,
              name: name,
              title:jianjie,
              imageurl: imageUrl,
              bcid:'3'
            },{
              headers: {

                " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
                "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
                'Content-Type': 'application/json',
              }
            }).then(()=>{
              console.log("添加成功")
            })


            })



            setJianjie('')
            setJianjie1('')
            setJianjie2('')
            setJianjie3('')
            setJianjie4('')
            setJianjie5('')
            setJianjie6('')
            setName('')
            setImage('')
            setImageUrl('')
            
            // setBcid('')
            navigate('/login')
          })
          .catch(error => {
            // 添加失败后的处理逻辑
            console.error('商品添加失败', error);
          });
      })
      .catch(error => {
        // 图片上传失败后的处理逻辑
        console.error('图片上传失败', error);
      });
  };
//   console.log(isLogined())

 

  
  useEffect(()=>{
    setBcid(bcid)
    console.log(bcid)
  },[bcid])

  return (

    <div className='pushinput'>
      <Heand />

      <form className='pushtj' >
        <div>
          <label htmlFor="name">商品名字：</label>
          <Input className="xqinp" type="text" id="name" value={name} onChange={handleNameChange} />
        </div>
        <div>
          <label htmlFor="name">商品简介：</label>
          <Input className="xqinp" type="text" id="jianjie" value={jianjie} onChange={handleJianjieChange} />
        </div>


        <div>
          <label htmlFor="name">商品名字：</label>
          <Input className="xqinp" type="text" id="jianjie" value={jianjie1} onChange={handleJianjieChange1} />
        </div>
        <div>
          <label htmlFor="name">商品类型：</label>
          <Input className="xqinp" type="text" id="jianjie" value={jianjie2} onChange={handleJianjieChange2} />
        </div>
        <div>
          <label htmlFor="name">商品材质：</label>
          <Input className="xqinp" type="text" id="jianjie" value={jianjie3} onChange={handleJianjieChange3} />
        </div>
        <div>
          <label htmlFor="name">商品厚度：</label>
          <Input className="xqinp" type="text" id="jianjie" value={jianjie4} onChange={handleJianjieChange4} />
        </div>
        <div>
          <label htmlFor="name">商品颜色：</label>
          <Input className="xqinp" type="text" id="jianjie" value={jianjie5} onChange={handleJianjieChange5} />
        </div>
        <div>
          <label htmlFor="name">其他：</label>
          <Input className="xqinp" type="text" id="jianjie" value={jianjie6} onChange={handleJianjieChange6} />
        </div>
        

        <div>
          <label htmlFor="image">商品图片：</label>
          <Input className="xqinp" type="file" id="image" onChange={handleImageChange} />
          {imageUrl && <img className='pushimage' src={imageUrl} alt="商品图片" />}
        </div>
       

        <Button onClick={handleSubmit} >添加商品</Button>
      </form>
    </div>
  )
}

export default Add_newdoor_home;